<template>
    <div>
            <van-dropdown-menu>
                <van-dropdown-item v-model="value1" @change="onChange" :options="option1" />
            </van-dropdown-menu>
            <!-- </header> -->
            <ul v-if="list.length">
                <li @click="pushDetail(data)" v-for="(data,index) in list" :key="index">
                    <div class="left">
                        <div class="img"><img :src="data.userHead" alt=""></div>
                        <div class="message">
                            <h3>{{data.initiator}}的{{data.isDelete == 1 ? '添加':'删除'}}{{value1 < 3 ? '课程' : '人员'}}审批</h3>
                            <p style="margin-top:0.22rem">发起人：{{data.initiator}}</p>
                            <p>隶属校区/部门：{{data.dep}}</p>
                            <div class="status">待处理</div>
                        </div>
                    </div>
                    <div class="right">
                       {{data.submitTime}}
                    </div>
                </li>
            </ul>
            <div v-else class="center">
                <div class="img">
                    <img src="img/quesheng1@2x.png" alt="">
                    <span>暂无审批内容</span>
                </div>
            </div>
    </div>
</template>
<script>
export default {
    mounted() {
        (async ()=>{
            let { data } = await this.get('/user/coursePersonnelApproveThePresentation',{status: 1,initiatorId:''});
            this.list = data;
        })()
    },
    computed: {

    },
    data() {
        return {
            value1: 0,
            active:"",
            list:[],
            emply:true,
            option1: [
                { text: '课程全部审批', value: 0 },
                { text: '课程添加审批', value: 1 },
                { text: '课程删除审批', value: 2 },
                { text: '人员全部审批', value: 3 },
                { text: '人员添加审批', value: 4 },
                { text: '人员删除审批', value: 5 },
            ],
        }
    },
    methods: {
        pushDetail(data){
            let type = 1;
            if(this.value1 > 2){
                type = 2
            }
            this.$router.push({
                path:'/disposedetail',
                query:{
                    type,
                    isDelete:data.isDelete,
                    status:1,
                    id:data.id
                }
            })
        },
        onChange(value){
            if(value == 0){
                (async ()=>{
                    let { data } = await this.get('/user/coursePersonnelApproveThePresentation',{status: 1,initiatorId:''});
                    this.list = data;
                })()
            }else if(value == 1){
               (async ()=>{
                    let { data } = await this.get('/user/coursePersonnelApproveThePresentation',{status: 1,isDelete:1,initiatorId:''});
                    this.list = data;
                    // if(!data.length)this.emply = false
                })()  
            }else if(value == 2){
                (async ()=>{
                    let { data } = await this.get('/user/coursePersonnelApproveThePresentation',{status: 1,isDelete:2,initiatorId:''});
                    this.list = data;
                    // if(!data.length)this.emply = false
                })() 
            }else if(value == 3){
                (async ()=>{
                    let { data } = await this.get('/user/peoplePersonnelApproveThePresentation',{status: 1,initiatorId:''});
                    this.list = data;
                    // if(!data.length)this.emply = false
                })() 
            }else if(value == 4){
                (async ()=>{
                    let { data } = await this.get('/user/peoplePersonnelApproveThePresentation',{status: 1,isDelete:1,initiatorId:''});
                    this.list = data;
                    // if(!data.length)this.emply = false
                })()
            }else{
                (async ()=>{
                    let { data } = await this.get('/user/peoplePersonnelApproveThePresentation',{status: 1,isDelete:2,initiatorId:''});
                    this.list = data;
                    // if(!data.length)this.emply = false
                })()
            }
        }
    },
}
</script>
<style lang="scss" scoped>
/deep/ .van-tabs__content{
    height: 100%;
}
/deep/ .van-tabs{
     height: 100%;
}
   /deep/ .van-dropdown-menu__title--active{
       color: #2E9EFF !important;
   }
   /deep/ .van-dropdown-item__option--active{
        color: #2E9EFF !important;
   }
   /deep/ .van-dropdown-item__option--active .van-dropdown-item__icon{
       color: #2E9EFF !important;
   }
    header{
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.16rem;
        box-sizing: border-box;
        border-bottom: 0.01rem solid #E7E7E7;
        img{
            width: 0.26rem;
            height: 0.26rem;
        }
        span{
            margin-left: 0.08rem;
            font-size: 0.26rem;
            color: #343434;
        }
    }
    ul{
        padding: 0 0.2rem;
        height: 100%;
        box-sizing: border-box;
        li{
            display: flex;
            // align-items: center;
            justify-content: space-between;
            padding: 0.2rem 0;
            box-sizing: border-box;
            border-bottom: 0.01rem solid #eee;
            .right{   
                font-size: 0.2rem;
                font-family: PingFang SC;
                font-weight: 400;
                color: #7F7F7F;
                text-align: center;
            }
            .left{
                display: flex;
                .img{
                    width: 0.7rem;
                    height: 0.7rem;
                    img{
                        width: 100%;
                        height: 100%;
                        vertical-align: top;
                        display: block;
                        border-radius: 50%;
                    }
                }
                .message{
                    margin-left: 0.15rem;
                    h3{
                        font-size: 0.26rem;
                        font-family: PingFang SC;
                        font-weight: bold;
                        color: #343434;
                       
                    }
                    p{
                        font-size: 0.22rem;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #808080;
                         overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        width: 4rem;
                    }
                    .status{
                        margin-top: 0.3rem;
                        font-size: 0.2rem;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #FA742A;
                    }
                }
            }
        }
    }
    .center{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 2rem;
        .img{
            display: flex;
            flex-direction: column;
            align-items: center;
            img{
                width: 1.66rem;
                height: 1.26rem;
            }
            span{
                font-size: 0.28rem;
                font-family: PingFang SC;
                font-weight: 500;
                color: #C7C7C7;
                margin-top: 0.4rem;
            }
        }
    }
</style>